<template>
	<view class="orderDetails">
		<view class="top">
			<view class="state">
				<text>{{info.status_name}}</text>
				<image :src="obtainImgUrl('icon/icon32.jpg')" mode="aspectFill"></image>
				<text v-if="info.order_status==0">下单后请{{countDownList}}内付款，超时订单将自动关闭</text>
			</view>
			<view class="address"  v-if="info.is_virtual != 2">
				<image :src="obtainImgUrl('icon/icon33.png')" mode="aspectFill"></image>
				<view class="right">
					<view class="txt">
						<text>收货人：{{info.receiver_name}}</text>
						<text>{{info.receiver_mobile}}</text>
					</view>
					<view class="txt1">
						收货地址：{{info.receiver_address}}
					</view>
					<view class="jt"></view>
				</view>
			</view>
			<image class="img" :src="obtainImgUrl('icon/icon34.png')" mode="aspectFill"></image>
		</view>
		<view class="goods" v-for="(item,index) in info.productList" :key="index" >
			<image :src="item.product_picture" mode="aspectFill" ></image>
			<view class="right">
				<text @click="jump('product_view', item.product_id)">{{item.product_name}}</text>
				<text @click="jump('product_view', item.product_id)" style="color: rgba(200, 0, 0, 1);" v-if="item.sku_delivery_date != ''">{{item.sku_delivery_date}}</text>
				<view class="size" >
					<text>{{item.sku_name}}</text>
					<text>x{{item.num}}<text v-if="item.refund_num > 0" style="color: #dd0000;margin-left: 10rpx;">(已售后{{item.refund_num}}件)</text></text>
				</view>
				<text class="num" v-if="item.price > 0" >
					{{'￥'+item.price}}
				</text>
				<view class="operate" v-if="item.buttonList && item.buttonList.length > 0">
					<text v-for="(button,index1) in item.buttonList" :key="index1" @click="jump(button.type, item.id)" class="sel">
						{{button.name}}
					</text>
				</view>
			</view>
		</view>
		<view class="line" v-if="info.order_type != 9 && info.product_money > 0">
			<text>商品金额</text>
			<text>{{'￥'+info.product_money}}</text>
		</view>		
		<view class="line"  v-if="info.order_type != 9">
			<text>订单邮费</text>
			<text>{{info.shipping_money > 0 ? info.shipping_money : "包邮"}}</text>
		</view>
		<view class="pic" v-if="info.total_money > 0">
			<text>合计：</text>
			<text>{{'￥'+info.total_money}}</text>
		</view>
		<view class="line" v-if="info.useCard.id > 0">
			<text>提货卡号：</text>
			<view style="color: #ffc600;font-size: 30rpx;"><view>{{info.useCard.title}}</view> <view>{{info.useCard.code}}</view></view>
		</view>	
		<view class="common" v-if="info.buyer_message != ''">
			<text>买家留言</text>
			<text>{{info.buyer_message}}</text>
		</view>
		
		<view class="line" v-if="info.cardList && info.cardList.length > 0">
			<text>发放礼卡</text>
		</view>
		<view class="line" v-if="info.cardList && info.cardList.length > 0">
			<view class="cardInfo" v-if="info.cardList && info.cardList.length > 0" v-for="(card,index1) in info.cardList" :key="index1">
				<view>卡号：{{card.code}}</view>
				<view>到期时间：{{card.end_time}}</view>
			</view>
		</view>
		<view class="line">
			<button class="contact"  @click="previewImage(info.serviceImg,1)">
				<uni-icons type="chatboxes" color="#0095df" size="20" style="margin-right: 10upx;"></uni-icons>
				<text>联系客服</text>
			</button>
		</view>
		<view class="info">
			<text>订单信息：</text>
			<text>{{info.type_name}}：{{info.order_sn}}</text>
			<text v-if="info.pay_type != ''">支付方式：{{info.pay_type}}</text>
			<text>下单时间：{{info.created_at}}</text>
			<text v-if="info.pay_time != ''">付款时间：{{info.pay_time}}</text>
		</view>
		<view class="bot" v-if="info.buttonList && info.buttonList.length > 0">
			<view :class="info.buttonList.length == 1 ? 'txt1' : 'txt2'">
				<view class="operateBtn" v-for="(button,index2) in info.buttonList" :key="index2" @click="operate(button.type, info.id)">{{button.name}}</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" :src="obtainImgUrl('icon/close.png')" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>{{payInfo.pay_money}}</text>
				</view>
				<view class="line2" v-if="payInfo.user_money > 0" @click="selUseMoney()">
					<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
					<view :class="payInfo.isUseMoney ?'sel':'nosel'"></view>
				</view>
				<view class="line2" v-if="payInfo.pay_money > 0">
					<text>在线微信支付</text>
					<image :src="obtainImgUrl('icon/icon37.png')" mode="aspectFill"></image>
				</view>
				<view class="pay_bot" @click="subPay()">确认支付</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="selAddress" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" :src="obtainImgUrl('icon/close.png')" mode="aspectFill"></image>
				<view class="title">修改收货地址</view>
				<view class="line2" style="justify-content: unset;align-items: center;"  v-for="(address,index) in addressList" :key="index" @click="selAddress(address.id)">
					<view :class="nowAddressId == address.id ?'sel':'nosel'"></view>
					<text style="margin-left: 20rpx;width: 85%;">{{address.realname}} {{address.mobile}} {{address.address_name}} {{address.address_details}}</text>
				</view>
				<view class="addAddressBtn" @click="jump('addOreditAddress', 'id=0')">+ 新增其他地址</view>
				<view class="pay_bot" @click="subAddress()">确认修改</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				goodsList: [{}, {}],
				type: 0,
				id : 0,
				out_trade_no: 0,
				channel: 0,
				info : {},
				addressList: [],
				nowAddressId: 0,
				payInfo: {
					id : 0,
					type: '',
					pay_money: 0,
					isUseMoney: 0,
					totalMoney: 0,
					user_money: 0,
				},
				countDownList: '',
			}
		},
		// created() {
		// 	this.countDown();
		// },
		methods: {
			timeFormat(param) {
	　　　　　　return param < 10 ? '0' + param : param;
	　　　　	},
			numFilter(value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
			selAddress(id) {
				this.nowAddressId = id;
				this.$forceUpdate();
			},
			getAddressList() {
				serve.request({
					url: '/member/address/index',
					data:{}
				}).then(res => {
					this.addressList = res.data;
					if(res.data) {
						this.nowAddressId = res.data[0].id;
					}
				});
			},
			//预览图片
			previewImage:function(image,index){
				//var current = e.target.dataset.src
				//console.log(image);
				//此方法传图片地址要数组的形式，所以定义一个数组，然后将内容push进去，再去做图片预览
				var arr = [];
				arr.push(image);
				uni.previewImage({
					current: 0,
					urls: arr
				})
			},
			countDown() {
				console.info(this.info);
				if(this.info.order_status != 0) {
				   return ;
				}
				if(this.info.close_time == 0) {
					return ;
				}
	　　　　　　	var interval = setInterval(() => {
		　　　　　　	let newTime = new Date().getTime();
					let end_time = this.info.close_time;
		　　　　　　	let endTime = this.info.close_time * 1000;
		　　　　　　	let obj = null;
	　　　　　　　　	// 如果活动未结束，对时间进行处理
	　　　　　　　　	if (endTime - newTime > 0) {
		　　　　　　　　　　let time = (endTime - newTime) / 1000;
		　　　　　　　　　　// 获取天、时、分、秒
		　　　　　　　　　　let day = parseInt(time / (60 * 60 * 24));
		　　　　　　　　　　let hou = parseInt(time % (60 * 60 * 24) / 3600);
		　　　　　　　　　　let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
		　　　　　　　　　　let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
		　　　　　　　　　　obj = {
		　　　　　　　　　　　　day: this.timeFormat(day),
		　　　　　　　　　　　　hou: this.timeFormat(hou),
		　　　　　　　　　　　　min: this.timeFormat(min),
		　　　　　　　　　　　　sec: this.timeFormat(sec)
		　　　　　　　　　　};
	　　　　　　　　	} else {
		　　　　　　　　　　obj = {
		　　　　　　　　　　　　day: '00',
		　　　　　　　　　　　　hou: '00',
		　　　　　　　　　　　　min: '00',
		　　　　　　　　　　　　sec: '00'
		　　　　　　　　　　};
		　　　　　　　　　　clearInterval(interval);
						  this.info.close_time = 0;
		　　　　　　　}
		　　　　　　　this.countDownList = (Number(obj.day) > 0 ? obj.day + '天' : '') + obj.hou + '时' + obj.min + '分' + obj.sec + '秒';
	　　　　　　}, 1000);
	　　　　},
			getInfo() {
				var self = this;
				serve.request({
					url: '/member/order/view',
					data: {
						id: self.id,
						out_trade_no: self.out_trade_no,
						channel: self.channel,
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									self.jump('my_order_list')
								}, 2000) 
							}
						});
					}
					self.info = res.data;
					self.id = self.info.id;
					self.countDown();
				});
				self.getAddressList();
			},
			operate(operateType, operateId) {
				var self = this;
				if(operateType == 'order_cancel') {
					uni.showModal({
					    title: '提示',
					    content: '您确定取消该订单吗',
					    success: function (res) {
					        if (res.confirm) {
					            serve.request({
									url: '/member/order/close',
									data:{
										id:operateId,
									}
								}).then(res => {
									uni.showToast({
										title:res.message,
										icon: 'none',
									});
									if(res.code == 200) {
										self.getInfo();
									} 
								});
					        } 
					    }
					});
					return ;
				} else if(operateType == 'order_pay'){
					serve.request({
						url: '/member/order/pay-info',
						data:{
							id:operateId,
						}
					}).then(res => {
						self.payInfo.id = res.data.id;
						self.payInfo.type = res.data.type;
						self.payInfo.isUseMoney = 0;
						self.payInfo.totalMoney = res.data.totalMoney;
						self.payInfo.pay_money = res.data.totalMoney;
						self.payInfo.user_money = res.data.userMoney;
						self.$refs.popup.open();
					});
					return ;
				} else if(operateType == 'take_delivery'){
					uni.showModal({
					    title: '提示',
					    content: '您确定该订单已确定收货吗',
					    success: function (res) {
					        if (res.confirm) {
					            serve.request({
									url: '/member/order/take-delivery',
									data:{
										id:operateId,
									}
								}).then(res => {
									uni.showToast({
										title:res.message,
										icon: 'none'
									});
									if(res.code == 200) {
										self.getInfo();
									} 
								});
					        } 
					    }
					});
					return ;
				} else if (operateType == 'select_delivery') {
					uni.navigateTo({
					    url: '/pages/my/logisticsInformation?id='+operateId
					});
					return ;
				} else if (operateType == 'tip_delivery') {
					serve.request({
						url: '/member/order/tip-delivery',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id:operateId,
						}
					}).then(res => {
						uni.showToast({
							title:res.message,
							icon: 'none'
						});
					});
				} else if (operateType == 'edit_address') {
					self.$refs.selAddress.open();
				} else if (operateType == 'again_buyer') {
					self.jump('addOrder', 'type=again_buyer&data={"order_id":"'+operateId+'"}');
				} else if (operateType == 'evaluate_order') {
					self.jump('evaluate_order', operateId);
				} else if (operateType == 'cardList') {
					self.jump(operateType, 'state=1');
				}
			},
			close() {
				this.$refs.selAddress.close();
				this.$refs.popup.close();
			},
			selUseMoney() {
				this.payInfo.pay_money = JSON.parse(JSON.stringify(this.payInfo.totalMoney));
				this.payInfo.isUseMoney = this.payInfo.isUseMoney == 1 ? 0 : 1;
				if(this.payInfo.isUseMoney) {
					this.payInfo.pay_money = this.numFilter(Number(this.payInfo.pay_money) - Number(this.payInfo.user_money));
				}
				this.payInfo.pay_money = this.payInfo.pay_money > 0 ? this.payInfo.pay_money : 0;
			},
			selUseMoney() {
				this.payInfo.pay_money = JSON.parse(JSON.stringify(this.payInfo.totalMoney));
				this.payInfo.isUseMoney = this.payInfo.isUseMoney == 1 ? 0 : 1;
				if(this.payInfo.isUseMoney) {
					this.payInfo.pay_money = this.numFilter(Number(this.payInfo.pay_money) - Number(this.payInfo.user_money));
				}
				this.payInfo.pay_money = this.payInfo.pay_money > 0 ? this.payInfo.pay_money : 0;
			},
			subAddress() {
				if(this.nowAddressId == 0) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
					return;
				}
				serve.request({
					url: '/member/order/edit-address',
					data:{
						id: this.id,
						address_id: this.nowAddressId
					}
				}).then(res => {
					uni.showToast({
						title:res.message,
						icon: 'none'
					});
					this.close();
					this.getInfo();
					return ;
				});
			},
			subPay() {
				var self = this;
				serve.request({
					url: '/store/pay/wechat',
					data: self.payInfo
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title:res.message,
							icon: 'none'
						});
						return ;
					}
					
					let payConfig = res.data;
					if(!payConfig.isGoPay) {
						self.getInfo();
						self.$refs.popup.close();
						return ;
					}
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payConfig.timeStamp,
						nonceStr: payConfig.nonceStr,
						package: payConfig.package,
						signType: payConfig.signType,
						paySign: payConfig.paySign,
						success: function (res) {
							self.queryPayResult(payConfig.payId);
							// self.paySuccess(self.info.id, 'wechat');
							return ;
						},
						fail: function (err) {
							uni.showToast({
								title: '放弃支付',
								icon: 'none'
							});
							// self.paySuccess(self.pay_id, 'wechat');
							return ;
						}
					})
				});
				return ;
			},
			paySuccess(operateId, payType) {
				var self = this;
				serve.request({
					url: '/order/order/pay',
					data:{
						order_id:operateId,
						pay_type: payType
					}
				}).then(res => {
					uni.showToast({
						title:res.message,
						icon: 'none'
					});
					if(res.code == 200) {
						self.getInfo();
						self.$refs.popup.close();
					} 
					return ;
				});
				return ;
			},
			queryPayResult(payId) {
				uni.showLoading({
					title: '查询中···',
					mask: true
				});
				var self = this;
				setTimeout(function() {
					serve.request({
						url: '/payservice/query-pay',
						data:{
							payId: payId,
						}
					}).then(res => {
                        uni.hideLoading();
						if(res.data.payStatus == 1) {
							self.getInfo();
							self.$refs.popup.close();
						} else {
							self.queryPayResult(payId);
						}
					});
				}, 1500);
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.id=options.id || 0;
			this.channel = options.channel || 0;
			this.out_trade_no = options.out_trade_no || 0
			if((this.channel == 0 && this.id == 0) || (this.channel == 1 && this.out_trade_no == 0)) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('my_order_list')
						}, 2000) 
					}
				});
			}
		},
		onShow() {
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.orderDetails {
		padding-bottom: 0upx;
		background-color: #ffffff;

		.top {
			position: relative;
			border-bottom: 16upx rgba(251, 251, 253, 1) solid;

			.state {
				box-sizing: border-box;
				padding: 58upx 48upx;
				background: rgba(255, 200, 10, 0.06);
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				color: #FFC80A;
				font-size: 36upx;

				image {
					width: 280upx;
					height: 120upx;
				}

				text:last-child {
					position: absolute;
					bottom: 18upx;
					font-size: 24upx;
				}
			}

			.address {
				display: flex;
				position: relative;
				padding: 53upx 70upx;
				font-size: 28upx;
				font-weight: bold;
				align-items: center;

				image {
					position: absolute;
					left: 30upx;
					width: 31upx;
					height: 37upx;
					top: 120upx;
				}

				.txt {
					display: flex;
					justify-content: space-between;
					padding-bottom: 28upx;
				}

				.jt {
					position: absolute;
					right: 30upx;
					top: 105upx;
					content: '';
					border: 1upx solid rgba(57, 72, 107, 0.5);
					border-width: 0 3upx 3upx 0;
					padding: 6upx;
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
				}
			}

			.img {
				position: absolute;
				bottom: 0;
				height: 10upx;
				width: 100%;
			}
		}

		.goods {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 40upx 30upx;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			image {
				width: 170upx;
				height: 170upx;
				margin-right: 20upx;
				border-radius: 3%;
			}

			.right {
				position: relative;
				width: 503upx;
				display: flex;
				justify-content: center;
				flex-direction: column;
				font-size: 32upx;

				.operate {
					position: absolute;
					right: 0upx;
					bottom: 0upx;
					width: 130upx;
					height: 48upx;
					border: 1px solid rgba(57, 72, 107, 1);
					border-radius: 24upx;
					text-align: center;
					font-size: 24upx;
					line-height: 48upx;
					font-weight: bold;
					color: rgba(60, 72, 104, 0.5);
				}

				.size {
					display: flex;
					justify-content: space-between;
					padding: 12upx 0upx;
					color: rgba(60, 72, 104, 0.5);
					font-size: 24upx;
					align-items: center;
				}

				text:first-child {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.num {
					font-size: 24upx;
					color: rgba(255, 198, 0, 1);
				}
			}
		}

		.line {
			box-sizing: border-box;
			padding: 37upx 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			font-size: 28upx;
			font-weight: bold;
			color: rgba(60, 72, 104, 0.8);
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			text:last-child {
				color: rgba(255, 198, 0, 1);
				font-size: 32upx;
			};
			
			.cardInfo {
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 10rpx;
				view {
					width: 50%;
				}
			}
			.contact{
				//background: white;
				height: 100upx;
				width: 400upx;
				box-sizing: border-box;
				display: inline;
				font-size: 15upx;
				//font-weight: 400;
				border-radius: 50upx;
				//border: 2upx #cccccc solid;
				background-color: #FFFFFF;
				text{
					color: #666666;
				}
			}
		}

		.pic {
			box-sizing: border-box;
			padding: 37upx 30upx;
			display: flex;
			justify-content: flex-end;
			font-size: 20upx;
			color: rgba(60, 72, 104, 1);
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			text:last-child {
				color: rgba(255, 198, 0, 1);
				font-size: 28upx;
			}

			;
		}

		.common {
			box-sizing: border-box;
			padding: 37upx 30upx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: flex-start;
			font-weight: bold;
			font-size: 28upx;
			color: rgba(60, 72, 104, 0.8);
			border-bottom: 16upx rgba(251, 251, 253, 1) solid;

			text:last-child {
				max-width: 540upx;
			};
		}

		.info {
			display: flex;
			flex-direction: column;
			padding: 47upx 30upx 250upx 30upx;
			font-size: 28upx;
			color: rgba(60, 72, 104, 0.8);

			text:first-child {
				font-weight: bold;
				margin-top: 0upx
			}

			text {
				font-weight: 400;
				margin-top: 20upx;
			}
		}

		.bot {
			position: fixed;
			width: 100%;
			height: 150upx;
			bottom: 0upx;
			border-top: 1upx #EBECF0 solid;
            padding-bottom: 0upx;
			margin-bottom: -50upx;
			.txt1 {
				box-shadow: 0px 1upx 0px 0px rgba(235, 236, 240, 1);
				width: 100%;
				height: 100%;
				background: #FFC80A;
				color: #FFFFFF;
				font-size: 28upx;
				text-align: center;
				line-height: 100upx;
				padding-bottom: 50upx;
			}

			.txt2 {
				box-shadow: 0px 1upx 0px 0px rgba(235, 236, 240, 1);
				display: flex;
				width: 100%;
				height: 100%;

				.operateBtn {
					height: 100upx;
					line-height: 100upx;
					text-align: center;
					width: 50%;
					font-size: 28upx;
				}

				.operateBtn:nth-child(3n+1) {
					background: #fbca3f;
					border: 1upx solid #fbca3f;
					color: #FFFFFF;
				}
				.operateBtn:nth-child(3n+2) {
					background: #ff5500;
					border: 1upx solid #ff5500;
					color: #FFFFFF;
				}
				.operateBtn:nth-child(3n) {
					background: #5555ff;
					border: 1upx solid #5555ff;
					color: #FFFFFF;
				}
			}
		}
		.pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 26upx;
				text:last-child{
					color: rgba(255, 200, 10, 1);
					font-size: 32upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				image{
					width: 40upx;
					height: 40upx;
				}
			}
			.nosel {
			    width: 36upx;
			    height: 36upx;
			    border: 1upx solid rgba(60, 72, 104, 1);
			    border-radius: 50%;
			}
			
			.sel {
			    background-image: url(../../static/img/check.png);
			    background-repeat: no-repeat;
			    width: 40upx;
			    height: 40upx;
			    background-size: 100%;
			}
			.addAddressBtn {
				width: 300rpx;
				text-align: center;
				margin: 0px 25%;
				border: 1px solid #f60;
				background: #f60;
				color: #fff;
				padding: 20rpx 0;
				border-radius: 20rpx;
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: rgba(255, 200, 10, 1);
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>
